import { CustomForm } from '@/components/ProForm/interface/index';

import { selectOptions } from '../../../form/component/right/basic/options';
import { CustomTable, ProTableValue } from '@/components/ProTable/interface';
import { setNestedValue } from '@/utils//operationObject';
import { v4 as uuidv4 } from 'uuid';
import { defaultStyle } from '@/basic/style';

export function useAddBtnForm(dataGrid: CustomTable) {
  let addBtnForm = reactive<CustomForm>({
    form: {},
    title: '',
    visible: false,
    transitionArr: [],
    options: [
      {
        type: 'input',
        label: 'ID',
        prop: 'id',
        hide: true
      },
      {
        type: 'input',
        label: 'parentId',
        prop: 'parentId',
        hide: true
      },
      {
        type: 'input',
        label: '按钮类型',
        prop: 'btnType',
        hide: true
      },
      {
        type: 'input',
        hide: false,
        prop: 'label',
        label: '标签'
      },
      {
        type: 'input',
        hide: false,
        prop: 'icon',
        label: '图标'
      },

      {
        type: 'select',
        hide: false,
        prop: 'type',
        label: '按钮类型',
        attrs: {
          clearable: false
        },
        defaultValue: 'primary',
        children: [
          {
            label: '默认',
            value: 'default',
            type: 'option'
          },
          {
            label: '主要',
            value: 'primary',
            type: 'option'
          },
          {
            label: '成功',
            value: 'success',
            type: 'option'
          },
          {
            label: '警告',
            value: 'warning',
            type: 'option'
          },
          {
            label: '危险',
            value: 'danger',
            type: 'option'
          },
          {
            label: '信息',
            value: 'info',
            type: 'option'
          }
        ]
      },
      {
        type: 'tree-select',
        hide: false,
        prop: 'permissionCode',
        label: '权限码',
        attrs: {
          checkStrictly: false,
          multiple: true,
          data: []
        }
      },

      {
        type: 'select',
        hide: false,
        prop: 'trigger',
        label: '子显示触发条件',
        attrs: {
          clearable: false
        },
        children: [
          {
            label: '点击',
            value: 'click',
            type: 'option'
          },
          {
            label: '悬停',
            value: 'hover',
            type: 'option'
          }
        ]
      },

      {
        type: 'select',
        hide: false,
        prop: 'attrs.link',
        label: '链接按钮',
        attrs: {
          clearable: false
        },

        changeMethod: form => {
          form['attrs.plain'] = form['attrs.link'];
        },
        children: selectOptions
      },
      {
        type: 'select',
        hide: false,
        prop: 'attrs.plain',
        label: '朴素按钮',
        attrs: {
          clearable: false
        },
        children: selectOptions
      },
      {
        type: 'input',
        hide: false,
        prop: 'tooltip',
        label: '鼠标放上提示'
      },
      {
        type: 'input',
        hide: false,
        prop: 'order',
        label: '排序',
        attrs: {
          placeholder: '正整数'
        }
      },
      {
        type: 'input',
        hide: false,
        prop: 'hide',
        attrs: {
          type: 'textarea',
          style: defaultStyle,
          autosize: {
            minRows: 6,
            maxRows: 10
          }
        },
        label: '隐藏条件'
      },
      {
        type: 'input',
        hide: false,
        prop: 'display',
        attrs: {
          type: 'textarea',
          style: defaultStyle,
          autosize: {
            minRows: 6,
            maxRows: 10
          }
        },
        label: '显示条件'
      },
      {
        type: 'input',
        hide: false,
        prop: 'methods',
        label: '点击方法',
        attrs: {
          style: defaultStyle,
          type: 'textarea',
          autosize: {
            minRows: 8,
            maxRows: 20
          }
        }
      }
    ]
  });

  const saveAddBtnForm = async (form, data) => {
    const flag = form.btnType === 'head';
    let btnDataGrid = flag ? data[0] : data[1];
    let length = flag ? dataGrid.headButtonList.length : dataGrid.rowButtonList.length;
    const params: any = {
      ...form
    };
    Object.keys(form).forEach(key => {
      setNestedValue(params, key, form[key]);
    });

    const defaultParams = {
      id: uuidv4(),
      order: form.order || (length + 1) * 10
    };

    if (form.id) {
      btnDataGrid.data.forEach(item => {
        if (params.parentId) {
          if (params.parentId === item.id) {
            // 编辑子节点
            for (let son of item.children) {
              if (son.id === params.id) {
                Object.assign(son, params);
              }
            }
          }
        } else if (item.id === params.id) {
          Object.assign(item, {
            ...params,
            ...defaultParams
          });
        }
      });
    } else {
      if (params.parentId) {
        for (let item of btnDataGrid.data) {
          if (item.id === params.parentId) {
            if (!item?.children) item.children = [];
            item.children.push({ ...params, ...defaultParams });
          }
        }
      } else {
        btnDataGrid.data.push({ ...params, ...defaultParams });
      }
    }

    arrSortItemsByName(btnDataGrid.data, 'order', false);

    setDataGridBtn(btnDataGrid, flag ? 'headButtonList' : 'rowButtonList');
    setTimeout(() => {
      elMessage();
      useGlobalStore().setGlobalState('formLoading', false);
      addBtnForm.visible = false;
    }, 0);
  };

  const openAddBtnForm = (title: string, row) => {
    const params = {
      type: ['menu', 'button']
    };
    permissionListTree(params).then(data => {
      const children = new Map();
      children.set('permissionCode', treeToSelect(data, 'description', 'permName'));
      formSetChildren(addBtnForm, children);
    });
    formOpen(addBtnForm, title, row);
  };

  const setDataGridBtn = (btnDataGrid, field: string) => {
    dataGrid[field] = btnDataGrid.data;
  };

  return { addBtnForm, saveAddBtnForm, openAddBtnForm };
}
